<template>
    <div class="jiankong clearfix">
        <section class="content-header">大用户实时监控&nbsp;/&nbsp;实时监控</section>
        <section class="right-bar">
            <div class="selectbox">
                <yingyesuo v-model="seleteData.areaIdSA01"/>
                <pianqu v-model="seleteData.areaIdSA02" :areaId="seleteData.areaIdSA01"/>
                <div class="form-group clearfix">
                    <label class="col-md-4 control-label">用户名称：</label>
                    <div class="col-md-8">
                        <input
                            type="email"
                            class="form-control"
                            v-model="seleteData.userName"
                            placeholder="请输入用户名称"
                        >
                    </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-md-5 col-md-offset-2">
                        <button
                            type="button"
                            class="btn btn-primary"
                            @click="$refs.page.getList(1)"
                        >查询</button>
                    </div>
                    <div class="col-md-5">
                        <button type="button" class="btn btn-primary">重置</button>
                    </div>
                </div>
            </div>
            <div class="list">
                <ul>
                    <li v-for="item in list" :key="item.value">
                        <p
                            style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
                        >用户名称：{{item.userName}}</p>
                        <p>供水流量：{{item.userWater.supplyWater}}</p>
                        <p>排水流量：{{item.userWater.drainWater}}</p>
                        <p>更新时间：{{item.userWater.drainTime}}</p>
                    </li>
                </ul>
                <ctrlPage :setPage="getList" :type="type" ref="page" :rows="5"/>
            </div>
        </section>
    </div>
</template>

<script>
import ctrlPage from "@/components/common/ctrlPage.vue";
import pianqu from "@/components/common/area.vue";
import yingyesuo from "@/components/common/yingyesuo.vue";

export default {
    data() {
        return {
            type: "total, prev, pager, next",
            seleteData: {
                areaIdSA02: "",
                areaIdSA01: "",
                userName: ""
            },
            list: [],
            total: ""
        };
    },
    components: {
        pianqu,
        yingyesuo,
        ctrlPage
    },
    mounted() {
        this.$refs.page.getList(1);
    },
    methods: {
        getList(pageIndex, pageSizes, callback) {
            this.$api.biguser
                .real({
                    pageNum: pageIndex || 1,
                    pageSize: pageSizes || 10,
                    areaIdSA02: this.seleteData.areaIdSA02,
                    areaIdSA01: this.seleteData.areaIdSA01,
                    userName: this.seleteData.userName
                })
                .then(res => {
                    if (res.success) {
                        this.list = res.data.list;
                        this.total = res.data.total;
                        callback(this.list, this.total);
                    }
                });
        }
    }
};
</script>

<style>
</style>
